<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<!-- style format -->
<link rel="stylesheet" href="http://validform.rjboy.cn/wp-content/themes/validform/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/common/vendor.css"/>
<link rel="stylesheet" href="../css/common/main.css"/>
<link rel="stylesheet" href="../css/common/common.css"/>
<!-- jquery -->
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../ui/validateform/Validform_v5.3.2_min.js"></script>
<!-- bootstarp -->
<link rel="stylesheet" href="../ui/bootstarp/css/bootstrap.min.css"/>
<script type="text/javascript" src="../ui/bootstarp/js/bootstrap.min.js"></script>
<!--artDialog  -->
<script type="text/javascript" src="../ui/artDialog-master/dist/dialog-min.js"></script>
<link rel="stylesheet" href="../ui/artDialog-master/css/ui-dialog.css"/> 

</head>
<body >
<div class="ibox">
	<div class="ibox-title">
		<h7>
			<i class="fa fa-sliders"></i>新增用户
		</h7>
	</div>
	<div class="ibox-content form  "  >
		<form id="form" class="form-horizontal" role="form" >
			<div class="form-body  ">
				<div class="form-group text-center">
					<label for="username" class="col-xs-8 text-right control-label">用户名</label>
					<div class="col-xs-4" >
						<input type="text" id="username" name="username" placeholder="用户名" ajaxurl="../sysUser/isUserRept"
							class="form-control input-sm" maxlength="20"  />
					</div>
					<div class="Validform_checktip"></div>
				</div>
				 <div class="form-group">
					<label for="email" class="col-xs-4 text-right control-label">邮箱</label>
					<div class="col-xs-4">
						<input type="text" id="email" name="email" placeholder="邮箱" ajaxurl="../sysUser/isEmailRept"
							class="form-control input-sm" maxlength="20" />
					</div>
					<div class="Validform_checktip"></div>
				</div>
				<div class="form-group">
					<label for="age" class="col-xs-4 text-right control-label">年龄</label>
					<div class="col-xs-4">
						<input type="text" id="age" name="age" placeholder="年龄"
							class="form-control input-sm" />
					</div>
					<div class="Validform_checktip"></div>
				</div>
				<div class="form-group">
					<label for="sex" class="col-xs-4 text-right control-label">性别</label>
					<div class="col-xs-4">
						<select id="sex" name="sex" class="form-control input-sm">
							<option value="">请选择</option>
							<option value="1" >男</option>
							<option value="0">女</option>
						</select>
					</div>
					<div class="Validform_checktip"></div>
				</div>
				<div class="form-group">
					<label for="phone" class="col-xs-4 text-right control-label">手机号码</label>
					<div class="col-xs-4">
						<input type="text" id="phone" name="phone" 
							class="form-control input-sm" maxlength="11" placeholder="手机号码"/>
					</div>
					<div class="Validform_checktip"></div>
				</div>
				<div class="form-group">
					<label for="address" class="col-xs-4 text-right control-label">地址</label>
					<div class="col-xs-4">
						<input type="text" id="address" name="address"
							class="form-control input-sm" maxlength="100" placeholder="由中英文数字等组成，最大50位"/>
					</div>
					<div class="Validform_checktip"></div>
				</div>
				<div class="form-group">
					<label for="state" class="col-xs-4 text-right control-label">状态</label>
					<div class="col-xs-4">
						<select id="state" name="state" class="form-control input-sm">
							<option value="">请选择</option>
							<option  value="1">启用</option>
							<option value="0">停用</option>
						</select>
					</div>
					<div class="Validform_checktip"></div>
				</div> 
				<div class="form-group">
					<label for="state" class="col-xs-4 text-right control-label">角色</label>
					<div class="col-xs-4">
						<select id="state" name="sysRole.roleId" class="form-control input-sm">
							<%for(role in roleList){%>
								<option  value="${role.roleId}">${role.roleName}</option>
							<%}%>
						</select>
					</div>
					<div class="Validform_checktip"></div>
				</div> 
			</div>
			<div class="form-actions text-center" >
					<div class="row" style="text-align: center;">
							<button id="saveBtn" type="button" class="btn btn-sm btn-primary" onclick="saveSysUser()">提 交</button>
							<button id="cancelBtn" type="button" class="btn btn-sm btn-default" onclick="back()">返  回</button>
					</div>
				</div>
			
		</form>
	</div>
</div>
</body>
<% var root = request.contextPath; %>
<script type="text/javascript">
	$(function(){
		var demo=$("#form").Validform({
			tiptype:function(msg,o,cssctl){
				if(!o.obj.is("form")){
					var objtip=o.obj.parent().siblings(".Validform_checktip");
					cssctl(objtip,o.type);
					objtip.text(msg);
				}
			},
			label:".label",
			showAllError:true,
			datatype:{
				"zh3-20":/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
			},
			ajaxPost:true
		});
		
		demo.addRule([{
			ele:"#username",
			datatype:"*3-20",
			nullmsg:"用户名不能为空",
			errormsg:"长度2-30个字符！"
		},
		{
			ele:"#email",
			datatype:"e",
			nullmsg:"邮箱不能为空",
			errormsg:"邮箱格式不正确！"
		},
		{
			ele:"#age",
			datatype:"n1-2",
			nullmsg:"年龄不能为空",
			errormsg:"年龄必须为数字,且不能大于两位！"
		},
		{
			ele:"#sex",
			datatype:"s",
			nullmsg:"请选择！",
			errormsg:"请选择！"
		},
		{
			ele:"#phone",
			datatype:"m",
			nullmsg:"手机号不能为空",
			errormsg:"手机号码格式不正确！"
		},
		{
			ele:"#state",
			datatype:"s",
			nullmsg:"请选择！",
			errormsg:"请选择！"
		}
		]);
		
	})
	function saveSysUser(){
			$.ajax({
				type:"post",
				data:$("#form").serializeArray(),
				url: '../sysUser/saveSysUser',
				async:false,
				success: function(data, textStatus){
					var d = dialog({
					    title: '提示',
					    content: data.info,
					    okValue: '确定',
					    cancel: false,
					    width:'200',
					    ok: function () {
					    	back();	
					    }
					});
					d.show();
				}
			});
		
	}
	
	function back(){
		location.href="${root}/sysUser/index";
	}
	
</script>
</html>